﻿@{
    ViewBag.Title = "CollisionShape";
    Layout = "~/Views/Shared/_EaselPage.cshtml";
}

<h2>Collision Shape</h2>

<canvas id="testCanvas" width="1000" height="750" style="border: #008000 solid 1px"></canvas>

<script type="text/javascript">
    var stage;
    var circle;
    var square;
    var directionCircle = 1;
    var directionSquare = 1;
    var velocity = 10;

    function init() {
        stage = new createjs.Stage(document.getElementById('testCanvas'));
        createjs.Ticker.addEventListener("tick", tick);
        createjs.Ticker.setFPS(60);
        start();
    }

    function start() {
        // init circle
        circle = new createjs.Shape();
        circle.graphics.beginStroke('#000');
        circle.graphics.beginFill('#00ca00');
        circle.graphics.drawCircle(0, 0, 50);
        circle.radius = 50;
        circle.x = 100;
        circle.y = 300;

        // init square
        var g = new createjs.Graphics();
        g.beginStroke('#000').beginFill('#00ca00').drawRect(0, 0, 100, 100);
        square = new createjs.Shape(g);
        square.x = 0;
        square.y = 500;
        stage.addChild(square);

        stage.addChild(circle);
        stage.addChild(square);

        stage.update();
    }

    function updateCircle() {
        var nextX = circle.x + (velocity * directionCircle);
        if (nextX > stage.canvas.width - circle.radius) {
            nextX = stage.canvas.width - circle.radius;
            directionCircle *= -1;
        }
        else if (nextX < circle.radius) {
            nextX = circle.radius;
            directionCircle *= -1;
        }
        circle.nextX = nextX;
    }

    function renderCircle() {
        circle.x = circle.nextX;
    }

    function updateSquare() {
        var nextX = square.x + (velocity * directionSquare);
        if (nextX > stage.canvas.width - 100) {
            nextX = stage.canvas.width - 100;
            directionSquare *= -1;
        }
        else if (nextX < 0) {
            nextX = 0;
            directionSquare *= -1;
        }
        square.nextX = nextX;
    }

    function renderSquare() {
        square.x = square.nextX;
    }

    function tick(e) {
        updateCircle();
        renderCircle();

        updateSquare();
        renderSquare();

        stage.update();
    }
</script>


